<!DOCTYPE html>
<html>

<head>
    <title>详情页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link rel="stylesheet"href="/assets/home/css/mui.min.css">
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css">
    <link rel="stylesheet" href="/assets/home/plugin/ckplayer/css/ckplayer.css">
    <link rel="stylesheet" href="/assets/home/css/common.css">
    <link rel="stylesheet" href="/assets/home/css/details.css">
    <!-- 加载ckplayer视频插件 -->
    <script src="/assets/home/plugin/ckplayer/js/ckplayer.min.js"></script>
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>

    <link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
    <script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
</head>

<body>
    <header class="mui-bar mui-bar-nav mui-bar-nav-bg">
        <div class="nav">
            <ul id="tab">
                <li class="active" data-type="course">课程</li>
                <li data-type="info">详情</li>
                <li data-type="comment">评论</li>
            </ul>
        </div>
    </header>

    <div id="tab-content">
        <div id="course" class="active">
            <div id="cover">
                <!-- 课程封面 -->
                <img class="cover_bg" src="{$subject.thumbs_text}">
                <!-- 中间播放键 -->
                <div id="play">
                    <img src="/assets/home/images/play.png" />
                </div>
            </div>
        
            <!-- ckplayer视频容器元素 -->
            <div id="video"></div>
        
            <!-- 课程信息 -->
            <div class="head">
                <div class="info">
                    <h4 class="name">{$subject.title}</h4>
                    <div class="action">
                        <!-- 点赞 -->
                        <!-- <img class="thumbs" src="/assets/home/images/thumbs-up.png" alt=""> -->
        
                        <!-- 未点赞 -->
                        <img class="thumbs" src="/assets/home/images/thumbs{$isLike?'-up':''}.png" alt="">
                        <span class="num">{$subject.likes_num}</span>
                    </div>
                </div>
                <ul>
                    <li>
                        <span>课程分类：</span>{$subject.category.name}
                    </li>
                    <li>
                        <span>课程价格：</span>
                        <span class="price">￥{$subject.price}</span>
                    </li>
                    <li>
                        <span>章节总数：</span>{$subject.chapters|count}
                    </li>
                    <li>
                        <span>发布时间：</span>{$subject.date}
                    </li>
                </ul>
            </div>
        
            <!-- 授课老师 -->
            <div class="teacher">
                <div class="title">授课老师</div>
                <div class="info">
                    <div class="left">
                        <div class="avatar">
                            <a href="/home/educator/teacherInfo?id={$subject.teacher.id}">
                                <img src="{$subject.teacher.avatar_text}" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="right">
                        <div class="name">
                            <a href="#">
                                {$subject.teacher.name}
                            </a>
                        </div>
                        <div class="job">{$subject.teacher.job}</div>
                        <div class="content">
                            {$subject.teacher.content}
                        </div>
                    </div>
                </div>
            </div>

            <div class="chapter">
                <div class="title">课程章节</div>
                {empty name="$subject.chapters"}
                    <div>暂无课程章节</div>
                {else /}
                    <ul>
                        {foreach $subject.chapters as $i=>$chapter}
                        <li id="chapter{$chapter.id}">{$chapter.title}</li>
                        {/foreach}
                    </ul>
                    <div style="height: 50px;"></div>
                {/empty}
                
            </div>

            <!-- 购买 -->
            <div class="footer">
                <div class="footer-box">
                    <div class="collection">
                        <img src="/assets/home/images/rate{$isCollection?'_active':''}.png" alt="">
                        收藏
                    </div>
                    {$isPay?'<a class="btn" href="javascript:void(0)" onclick="play()">播放</a>':
                    '<a href="/home/course/confirm?id='.$subject.id.'" class="btn">购买</a>'}
                </div>
            </div>
        </div>
        <div id="info">
            <div class="mui-table-view content">课程描述</div>
            <div class="content">
                {$subject.content}
            </div>
        </div>
        <div id="comment" class="mescroll">
            <div class="mui-table-view list">
            </div>
        </div>
    </div>

    <!-- 弹出菜单 -->
    <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a id="buy" href="javascript:void(0)">
                    立即购买
                </a>
            </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="#sheet1"><b>取消</b></a>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    var chapterid = {$subject.chapters?$subject.chapters[0]['id']:null}

    $(`#chapter${chapterid}`)&&$(`#chapter${chapterid}`).addClass('active')

    var id = {$subject.id}

    $('.footer .collection img').click(function(){
        $.post('/home/center/collection',{id})
        .then((data)=>{
            if(data.code){
                $(this).prop('src',`/assets/home/images/rate${data.isCollection?'_active':''}.png`)                
            }
            mui.toast(data.msg, {duration: 3000})

        },(jqXHR)=>{
            mui.toast('请求失败，请检查网络', {duration: 3000})
        })
    })

    $('.thumbs').click(function(){
        $.post('/home/course/details',{id})
        .then((data)=>{
            if(data.code){
                $(this).prop('src',`/assets/home/images/thumbs${data.isLike?'-up':''}.png`)
                $(this).next().text(parseInt($(this).next().text())+(data.isLike?1:-1))
                
            }
            mui.toast(data.msg, {duration: 3000})

        },(jqXHR)=>{
            mui.toast('请求失败，请检查网络', {duration: 3000})
        })
    })

    $('#tab li').click(function(){
        let type = $(this).data('type');

        $(this).addClass('active').siblings().removeClass('active');
        $('#tab-content #' + type).addClass('active').siblings().removeClass('active');
    })

    $("#iosActionsheetCancel").click(function () {
        mui('#sheet1').popover('toggle');
    })

    // 点击播放
    $("#play").on('click', function () {
        {$isPay?'play()':'Paydata()'}
    })

    $('.chapter ul li').click(function(){
        $(this).addClass('active').siblings().removeClass('active')
        chapterid = $(this).attr('id').substring(7)
        play()
    })

    function play()
    {
        $.post('/home/course/chapter',{chapterid})
        .then((data)=>{
            if(data.code){
                $(window).scrollTop(0);
                $('#cover').css('display','none')
                $('#video').css('display','block')
                var videoObject = {
                    container: '#video', //“#”代表容器的ID，“.”或“”代表容器的class
                    variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
                    loaded:'loadedHandler',//播放器加载完成后调用该函数
                    video: data.msg,//视频地址
                    autoplay: true,
                };
                var player = new ckplayer(videoObject);//初始化播放器
                function loadedHandler(name){
                    //调用到该函数后说明播放器已加载成功，可以进行部分控制了。此时视频还没有加载完成，所以不能控制视频的播放，暂停，获取元数据等事件
                    player.addListener('duration', durationHandler); //监听元数据
                }
                function durationHandler(time,name){
                    //监听到元数据信息
                    alert('视频总时间：'+time+'，播放器名称：'+name);
                }
            }else{
                mui.toast(data.msg, {duration: 3000})
            }
        })
        
    }

    function Paydata() {
        mui('#sheet1').popover('toggle');
    }

    $("#buy").on('click', function () {
        mui('#sheet1').popover('toggle');
        var btnArray = ['否', '是'];
        mui.confirm('请问您确认购买吗？', '尊敬的用户', btnArray, function (e) {
            if (e.index = 1) {
                location.href = "/home/course/confirm?id={$subject.id}";
            }
        })
    })

    var mescroll = new MeScroll("comment", {
        down: {
            callback: downCallback
        },
        up: {
            callback: upCallback,
            isBounce: false, 
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 5 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
            noMoreSize: 5,
            toTop: {
                src: "/assets/home/plugin/mescroll/mescroll-totop.png",
                offset: 100,
                duration: 300,
                supportTap : true,
            },
            empty: {
                warpId:	"comment",
                tip: "暂无相关数据~"
            },
        }
    });

    function downCallback() {
        $('#comment .list').empty()
        mescroll.resetUpScroll()
    }

    function upCallback(page) 
    {
        $('.mescroll-totop').css('bottom','70px')
        var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
        var pageSize = page.size; // 页长, 默认每页10条
        $.post('/home/course/comment',{pageNum,pageSize,id})
        .then((data)=>{
            var curPageData = data.curPageData; // 接口返回的当前页数据列表
            var totalPage = data.totalPage; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
            mescroll.endByPage(curPageData.length, totalPage);
            
            if(page.num == 1) $('#comment .list').empty() // 第一页,先置空,再追加
            setListData(curPageData);
        },
        (e)=>{
            mescroll.endErr();
        })
    }

    function setListData(curPageData){
        html = ''
        for(var comment of curPageData){
            html += `<li class="mui-table-view-cell mui-media">
                    <img class="mui-media-object mui-pull-left userimg" src="${comment.business.avatar_text}">
                    <div class="mui-media-body">
                        <div class="header">
                            <span class="nickname">${comment.business.nickname}</span>
                        </div>
                        <p>${comment.content}</p>
                        <div class="rate">`
            for(var i=0;i<comment.rate+1;i++){
                html += '<span><img src="/assets/home/images/rate_active.png" alt=""></span>'
            }
            for(var i=comment.rate;i<5;i++){
                html += '<span><img src="/assets/home/images/rate.png" alt=""></span>'
            }
            html += `</div></div></li>`
        }
        // console.log(html)
        $('#comment .list').append(html)
    }

    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#comment' // 可选滚动容器选择器，否则使用窗口
    }).init();

</script>